import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  useLocation,
  Redirect,
  Switch
} from 'react-router-dom'

import Movie from './Movie'
import Theater from './Theater'


const IndexPage = () => {
  console.log(useLocation())
  let result = new URLSearchParams(useLocation().search)
  console.log(result.get("city"));
  return <h1>首页:{result.get("city")}-{result.get("code")}</h1>
}


const Page404 = () => {
  return <h1>404 page</h1>
}


export default class index extends Component {
  render() {
    return (
      <Router>
        <Link to="/"> 首页</Link>
        &nbsp;
        <Link to="/movie">电影</Link>
        &nbsp;
        <Link to="/theater/66">影院</Link>

        <div style={{width:"300px",height:"300px",background:"#efefef"}}>
          <Switch>
            <Route exact path="/index" component={IndexPage}>
              {/* <h1>首页</h1> */}
            </Route>

            <Route path="/movie" component={Movie}>
              {/* <h1>电影</h1> */}
            </Route>

            <Route path="/theater/:id" component={Theater}>
              {/* <h1>影院</h1> */}
            </Route>

            <Redirect exact from="/" to="/index?city=北京&code=10">
            </Redirect>

            <Route component={Page404} >

            </Route>

          </Switch>
        </div>
      </Router>
    )
  }
}
